<template>
	<view class="cartWrap">
		<u-checkbox-group
			placement="column"
			@change="checkboxChange">
			<template v-if="!empty">
				<view class="cartItem"  v-for="item of cartList" :key="item._id">
					<u-checkbox
						shape="circle"
						activeColor="rgb(31, 182, 131)"
						:name="item._id"
						:checked="item.checked">
					</u-checkbox>
					<view class="picWrap">
						<image :src="item.pid.coverPic"></image>
					</view>
					<view class="infoWrap">
						<text class="title">{{item.pid.title}}</text>
						<text class="viceTitle">{{item.pid.viceTitle}}</text>
						<view class="proInfo">
							<text class="price">{{item.pid.price}}&nbsp积分</text>
							<u-number-box 
								v-model="item.number" 
								@change="numChange($event,item)"
								buttonSize="24"
								iconStyle="font-size:24rpx;color: #fff"
								bgColor="rgb(31, 182, 131)"
								color="#ffffff"
							>
							</u-number-box>
						</view>
					</view>
				</view>
			</template>
			<u-empty
				v-else
				marginTop="140" 
				text="您还没有添加任何商品!" 
				icon="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8da6cc70-751c-428d-9aa0-6516abc1603f/8a713054-9ee5-40f5-b69f-0854834b5065.png">
			</u-empty>
		</u-checkbox-group>
		<view class="totalHandle">
			<u-checkbox-group class="left" @change="changeAll">
				<u-checkbox
					shape="circle"
					activeColor="rgb(31, 182, 131)"
					:name="allCheck.value"
					label="全选"
					:checked="allCheck.checked"
					>
				</u-checkbox>
			</u-checkbox-group>
			<view class="right" v-if="!isShowTotal">
				<view class="totalWrap">
					<text class="total">合计：</text>
					<text class="price">{{totalPrice}}积分</text>
				</view>
				<view class="btnWrap">
					<u-button type="success" size="mini" text="结算" shape="circle" @click="toOrderConfirm"></u-button>
				</view>
			</view>
			<view class="right" v-else>
				<view class="btnWrap">
					<u-button type="warning" size="mini" text="删除" shape="circle" @click="deleteCart"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {deepClone} from '@/common/deepClone'
	export default {
		props:{
			isShowTotal:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				cartList:[],
				empty:false,
				pid:'',
				id:'',
				proNum:1,
				totalPrice:0,
				allCheck:{
				  name:'全选',
				  value:'all',
				  checked:false
				},
				deleteList:[]
			}
		},
		computed: {
			newCartList(){
			  const cartList = deepClone(this.cartList)
			  cartList.forEach(item => {
			    item.pid.pid = item.pid._id
			    delete item.pid._id
			    Object.assign(item, item.pid)
			  })
			  return cartList
			},
			token(){
				return this.$store.state.auth.token
			}
		},
		wathch:{
			token(){
				this.getCart()
			}
		},
		methods:{
			async getCart(){
				this.cartList = []
				const {code,data} =await this.$axios.api.getCart()
				if(code === 200){
					this.cartList = data
					this.cartList.length>0?this.empty = false:this.empty = true
					let total = 0
					this.$emit('giveCartLen',this.cartList.length)
					this.allCheck.checked = false
					this.cartList.map(item=>{
						if(item.checked){
							total += item.number * item.pid.price
						}
					})
					this.totalPrice = total
				}
			},
			numChange(e,obj){
				let num = e.value
				if(num>obj.number){
					this.proNum = 1
				}else{
					this.proNum = -1
				}
				obj.number = num
				this.$axios.api.newAddCart({
					cartId:obj._id,
					pid:obj.pid._id,
					number:this.proNum
				}).then(res=>{
					console.log(res)
				})
				let total = 0
				this.cartList.map(item=>{
					if(item.checked){
						total += item.number * item.pid.price
					}
				})
				this.totalPrice = total
			},
			checkboxChange(idList){
				for(let i = 0;i<this.cartList.length;i++){
					const item = this.cartList[i]
					if(idList.includes(item._id)){
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
						this.totalPrice = 0
					}
				}
				const allChecked = this.cartList.every(item=>{
					return item.checked === true
				})
				allChecked?this.$set(this.allCheck,'checked',true):this.$set(this.allCheck,'checked',false)
				let total = 0
				this.cartList.map(item=>{
					if(item.checked){
						total += item.number * item.pid.price
					}
				})
				this.totalPrice = total
			},
			changeAll(n){
				console.log()
				if(n.length == 0) {
					this.cartList.map(item => this.$set(item, 'checked', false));
					this.$set(this.allCheck, 'checked', false);
				}else{
					this.cartList.map(item => this.$set(item, 'checked', true));
					this.$set(this.allCheck, 'checked', true);
				}
				let total = 0
				this.cartList.map(item=>{
					if(item.checked){
						total += item.number * item.pid.price
					}
				})
				this.totalPrice = total
			},
			deleteCart(){
				this.cartList.map(item=>{
					if(item.checked){
						this.deleteList.push(item._id)
					}
				})
				const this_ = this
				uni.showModal({
					title:'提示',
					content:`确定将这${this_.deleteList.length}个宝贝删除?`,
					success(res){
						if(res.confirm){
							this_.$axios.api.deleteCart({
								id:this_.deleteList
							}).then(res=>{
								if(res.code === 200){
									uni.showToast({
										title: '删除成功',
										icon:'success',
										duration: 2000
									})
									this_.deleteList = []
									this_.getCart()
								}
							})
						}
					}
				})
			},
			toOrderConfirm(){
				let proList = this.newCartList.filter(item=>{
					return item.checked === true
				})
				if(proList.length>0){
					this.$store.commit('giveGoods',proList)
					uni.navigateTo({
						url:'/subcom-shop/OrderConfirm/OrderConfirm'
					})
				}else{
					uni.showToast({
						title: '您还未选择商品',
						icon:'error',
						duration:2000
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.cartWrap {
	height: auto;
	display: flex;
	flex-direction: column;
	background-color: rgb(244, 244, 244);
	padding: 80rpx 20rpx 0 20rpx;
	box-sizing: border-box;
	.cartItem {
		height: 200rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		border-bottom: 1rpx dotted #ccc;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 10rpx;
		border-radius: 16rpx;
		&:last-child{
			margin-bottom: 180rpx;
		}
		.picWrap{
			width: 180rpx;
			height: 180rpx;
			padding: 10rpx;
			box-sizing: border-box;
			image{
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
		.infoWrap{
			flex: 1;
			height: 180rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding:10rpx 0 10rpx 20rpx;
			box-sizing: border-box;
			.title{
				line-height: 60rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: rgb(82, 82, 82);
			}
			.viceTitle{
				line-height:40rpx;
				font-size: 24rpx;
				color: rgb(120,120,120);
			}
			.proInfo{
				height: 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.price{
					color: rgb(235, 69, 18);
					font-size: 28rpx;
					font-weight: bold;
				}
			}
		}
	}
	.totalHandle{
		width: 100%;
		height: 80rpx;
		position: fixed;
		left: 0;
		/* #ifdef H5*/
		bottom: 50px;
		/* #endif */
		/* #ifdef MP-WEIXIN || APP-PLUS */
		bottom: 0;
		/* #endif */
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		border: 1rpx solid rgb(236, 236, 236);
		box-sizing: border-box;
		.right{
			height: 80rpx;
			display: flex;
			align-items: center;
			.totalWrap{
				.total{
					font-weight: bold;
					font-size: 26rpx;
					color: rgb(104, 104, 104);
				}
				.price{
					color:rgb(31, 182, 131);
					font-size:24rpx
				}
			}
			.btnWrap{
				width: 160rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 20rpx;
			}
		}
	}
}
</style>
